<template>
  <div class="data_container">
    <div class="title">省市各项数汇总与日常管理</div>
    <div class="choose">
      <div class="choose_city">
        <span class="demonstration">选择城市</span>
        <el-cascader
          v-model="city_value"
          :options="city_options"
        ></el-cascader>
      </div>
      <div class="choose_month">
        <span class="demonstration">月</span>
        <el-date-picker
          v-model="month_value"
          type="month"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <el-button type="success" plain @click="getCityData('')">查询</el-button>
      <el-button class="export" type="info" round @click="exportExcel"
        >导出</el-button
      >
    </div>

    <div class="data_table">
      <el-table
        id="out-table"
        ref="out-table"
        :data="city_monitor_data"
        stripe
        border
        height="567"
        style="width: 100%"
      >
        <el-table-column prop="sea_area" label="海区"> </el-table-column>
        <el-table-column prop="province" label="省份"> </el-table-column>
        <el-table-column prop="prefecture" label="城市"> </el-table-column>
        <el-table-column prop="point_code" label="点位编码"> </el-table-column>
        <el-table-column prop="longitude" label="实测经度"> </el-table-column>
        <el-table-column prop="latitude" label="实测纬度"> </el-table-column>
        <el-table-column prop="time" label="检测时间"> </el-table-column>
        <el-table-column prop="ph" label="PH(无量纲)"> </el-table-column>
        <el-table-column prop="dissolved_oxygen" label="溶解氧(mg/L)">
        </el-table-column>
        <el-table-column prop="chemical_oxygen_demand" label="化学需氧量(mg/L)">
        </el-table-column>
        <el-table-column prop="inorganic_nitrogen" label="无机氮">
        </el-table-column>
        <el-table-column prop="active_phosphate" label="活性磷酸盐">
        </el-table-column>
        <el-table-column prop="Petroleum" label="石油类"> </el-table-column>
        <el-table-column prop="classification" label="水质类别">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// 导入下载用的东西
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  data() {
    return {
      isDone: false,
      city_value: [],
      // 默认7月
      month_value: "2022-07",
      city_options: [],
      city_monitor_data: [],
    };
  },
  created() {
    this.getCityOptions();
  },
  mounted() {},
  computed: {},
  watch: {
    city_value() {
      this.$nextTick(() => {
        if (!this.isDone) {
          // 之后变更isDone的状态
          this.isDone = true;
          // 只执行一次 剩下的点击查询触发
          this.getCityData("");
        }
      });
    },
  },
  methods: {
    // 获取城市options
    getCityOptions() {
      this.$axios({
        url: "getCityOptions",
      })
        .then((res) => {
          // console.log(res.data);
          this.city_options = res.data;
          // 默认选择第一个作为选择的监测点
          this.city_value = [res.data[0].value, res.data[0].children[0].value];
        })
        .catch((err) => err);
    },
    // 获取城市水质数据信息 表格
    getCityData(city_value) {
      let city = city_value ? city_value : this.city_value;
      this.$axios({
        url: "getCityData",
        params: {
          city: city,
          month: this.month_value,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.city_monitor_data = res.data;
        })
        .catch((err) => err);
    },
    // 导出
    exportExcel() {
      // 导出文件名
      let name =
        this.city_value[0] + "_" + this.city_value[1] + "监测数据.xlsx";
      //转换成excel时，使用原始的格式
      var xlsxParam = { raw: true };
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#out-table").removeChild(fix),
          xlsxParam
        );
        document.querySelector("#out-table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#out-table"),
          xlsxParam
        );
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>
<style lang='less' scoped>
.data_container {
  overflow-x: hidden;
  .title {
    height: 60px;
    // background: linear-gradient(to right, #00bfff, #87cefa);
    background: linear-gradient(to right, #2997e4, #1db5ea);
    font-size: 30px;
    color: white;
    padding: 7px;
    padding-left: 33px;
    line-height: 60px;
  }
  .choose {
    > div {
      display: inline-block;
    }
  }
  .choose_city,
  .choose_month {
    padding: 20px;
    margin-left: 20px;
    .demonstration {
      margin-right: 10px;
    }
  }
  .export {
    float: right;
    margin-top: 20px;
    margin-right: 30px;
  }
  .data_table {
    padding: 0 10px;
    .quality_bg {
      background-color: aqua;
    }
  }
}
</style>
